<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/orderManage.css">
</head>
<th:block th:include="~{IncludePage}"></th:block>

<!--    订单筛选-->
    <div class="order-screen">
        <div class="order-search">
            <input type="text" class="search-input" id="username-search-input" placeholder="请输入用户名">
            <button class="btn search-btn" id="search-btn" >搜索</button>
        </div>
        <div class="select-item">
            <label class="select-label">订单状态</label>
            <select name="" class="select-comboBox author" id="order-comboBox" >
                <option value="请选择" id="all-author" selected = selected>请选择</option>
                <option id="orderStatus1">未支付</option>
                <option id="orderStatus2">未发货</option>
                <option id="orderStatus3">已发货</option>
                <option id="orderStatus4">已收货</option>
                <option id="orderStatus5">已取消</option>
            </select>
        </div>
<!--        <div class="select-item">-->
<!--            <label class="select-label" >下单日期</label>-->
<!--            <select name="" class="select-comboBox" id="class-comboBox">-->
<!--                <option value="请选择" id="all-class" selected = selected>请选择</option>-->
<!--                <option id="date1">2023/3/30</option>-->
<!--                <option id="date2">2023/3/29</option>-->
<!--                <option id="date3">2023/3/28</option>-->
<!--                <option id="date4">2023/3/27</option>-->
<!--                <option id="date5">2023/3/26</option>-->
<!--            </select>-->
<!--        </div>-->
<!--        <div class="select-item">-->
<!--            <label class="select-label"  >宠物类别</label>-->
<!--            <select name="" class="select-comboBox" id="pressTime-comboBox">-->
<!--                <option value="请选择" selected = selected>请选择</option>-->
<!--                <option value="">猫</option>-->
<!--                <option value="">狗</option>-->
<!--                <option value="">鸟</option>-->
<!--                <option value="">鱼</option>-->
<!--                <option value="">蜥蜴</option>-->
<!--            </select>-->
<!--        </div>-->
<!--        <div class="select-item">-->
<!--            <label class="select-label" >宠物品种</label>-->
<!--            <select name="" class="select-comboBox" id="language-comboBox">-->
<!--                <option value="请选择" selected = selected>请选择</option>-->
<!--                <option value="">Bulldog</option>-->
<!--                <option value="">Chihuahua</option>-->
<!--                <option value="">Dalmation</option>-->
<!--                <option value="">Poodle</option>-->
<!--                <option value="">Golden Retriever</option>-->
<!--                <option value="">Labrador Retriever</option>-->
<!--            </select>-->
<!--        </div>-->
        <div class="screen-btns">
            <!--            <button class="btn screen-btn blue" id="btn-select">筛选</button>-->
            <button class="btn screen-btn gray" id="btn-reset">重置</button>
            <!--            <button class="btn screen-btn gray" id="btn-new">新增</button>-->
        </div>

    </div>


<!--        订单详情-->
    <div class="order-info" id="info-form">
        <div class="order-info-item">
            <div class="info-item-label">订单编号</div>
            <input type="text" class="info-item-input" id="info-orderId" placeholder="编号" disabled="disabled">
        </div>
        <div class="order-info-item">
            <div class="info-item-label">用户名</div>
            <input type="text" class="info-item-input" id="info-username" placeholder="用户名" disabled="disabled">
        </div>
        <div class="order-info-item">
            <div class="info-item-label">下单时间</div>
            <input type="text" class="info-item-input" id="info-date" placeholder="下单时间" disabled="disabled">
        </div>
        <div class="order-info-buttons">
            <button class="btn info-order-btn gray" id="close-info-form-btn">关闭</button>
        </div>
        <table class="order-info-table">
<!--            <tr class="table-title">-->
<!--                <th class="col1">编号</th>-->
<!--                <th class="col2">宠物编号</th>-->
<!--                <th class="col3">所属品种</th>-->
<!--                <th class="col4">所属种类</th>-->
<!--                <th class="col5">单价</th>-->
<!--                <th class="col6">购买数量</th>-->
<!--                <th class="col7">单条宠物总额</th>-->
<!--            </tr>-->
<!--            <tr class="order-data" th:each="lineItem:${session.LineItemList}">-->
<!--                <td id="order-id" th:text="${lineItem.getLineNumber()}"></td>-->
<!--                <td id="order-itemid" th:text="${lineItem.getItemId()}"></td>-->
<!--                <td id="order-productid" th:text="${lineItem.getProductId()}">111</td>-->
<!--                <td id="order-categoryid" th:text="${lineItem.getCategoryId()}">1111</td>-->
<!--                <td id="order-itemprice" th:text="${lineItem.getUnitPrice()}">222</td>-->
<!--                <td id="order-itemcount" th:text="${lineItem.getQuantity()}">100</td>-->
<!--                <td id="order-idprice" th:text="${lineItem.getUnitPrice()}*${lineItem.getQuantity()}">500</td>-->
<!--            </tr>-->
            <tr class="order-data">
                <td id="order-id"></td>
                <td id="order-itemid"></td>
                <td id="order-productid"></td>
                <td id="order-categoryid"></td>
                <td id="order-itemprice"></td>
                <td id="order-itemcount"></td>
                <td id="order-idprice"></td>
            </tr>
        </table>

    </div>
<!--        订单表格-->
    <div class="order-table">
        <table class="table" id="order-table">
            <tr class="table-title">
                <th class="col1">编号</th>
                <th class="col2">用户名</th>
                <th class="col3">下单时间</th>
                <th class="col4">发货地</th>
                <th class="col5">收货地</th>
                <th class="col6">总额</th>
                <th class="col7">订单状态</th>
                <th class="col8">操作</th>
            </tr>
            <tr class="order-data" th:each="order:${session.orderList}">
                <td th:text="${order.getOrderId()}"></td>
                <td th:text="${order.getUsername()}"></td>
                <td th:text="${order.getOrderDate()}"></td>
                <td th:text="${order.getShipCity()}"></td>
                <td th:text="${order.getBillCity()}"></td>
                <td th:text="${order.getTotalPrice()}"></td>
                <td class="btns-action">
                    <select disabled="disabled" id="order-status-selectList">
                        <option th:selected="${order.getOrderStatus().getStatus().equals('未付款')}" id="P1">未付款</option>
                        <option th:selected="${order.getOrderStatus().getStatus().equals('未发货')}" id="P2">未发货</option>
                        <option th:selected="${order.getOrderStatus().getStatus().equals('已发货')}" id="P3">已发货</option>
                        <option th:selected="${order.getOrderStatus().getStatus().equals('已收货')}" id="P4">已收货</option>
                        <option th:selected="${order.getOrderStatus().getStatus().equals('已取消')}" id="P5">已取消</option>
                    </select>
                </td>
                <td class="btns-action">
                    <button class="action-btn" id="edit-order-btn">编辑</button>
                    <button class="action-btn" id="confirm-edit-order-btn" style="display: none">确认</button>
                    <button class="action-btn" id="info-order-btn">详情</button>
                    <button class="action-btn" id="delete-order-btn">删除</button>
                </td>
            </tr>
        </table>


        <div class="nav-bottom">
            <p class="total">共1条 1页</p>
            <div class="link">上一页</div>
            <p class="current-page">第1页</p>
            <div class="link">下一页</div>
        </div>
    </div>


    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="js/includePage.js"></script>
<script src="js/orderManage.js"></script>
</html>